<template>
  <div class="home">
    <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
      <van-swipe-item v-for="item in lunbolist" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="3" class="my-grid">
      <van-grid-item :text="grid.title" v-for="grid in grids" :key="grid.id" :to="grid.to">
        <template slot="icon">
          <img :src="grid.src" />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script >
export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  created () {
    this.getLunBo()
    this.getGrids()
  },
  methods: {
    async getLunBo () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getlunbo')
      if (status !== 0) this.$Toast(message)
      this.lunbolist = message
    },
    async getGrids () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/grids')
      if (status !== 0) this.$Toast(message)
      this.grids = message
    }
  }
}
</script>
<style lang="less" scoped>

.my-swipe {
  height: 200px;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.my-grid{
  img{
    width:60px;
    height:60px;
    display: inline-block;
  }
}
</style>
